<template>
    <div class="login_box">
      <div class="mask"></div>
        <div class="container">
          <div class="top">
            <div :class="['left_box',{active:showPhoneLogin}]" @click="handleLogin(true)">
                手机号码登录
            </div>
            <span class="line"></span>
            <div :class="['right_box',{active:!showPhoneLogin}]" @click="handleLogin(false)">
                微信扫码登录
            </div>
          </div>
            <!--  底部内容展示区域  可以是二维码 也可以是微信扫码登录界面 -->
            <div class="content">
              <!-- 手机号码登录 -->
              <div class="phone" v-show="showPhoneLogin">
                <el-form
                  ref="ruleFormRef"
                  :model="formData"
                  status-icon
                  :rules="rules"
              
                  class="demo-ruleForm"
                >
                  <el-form-item label="" placeholder="请输入手机号码" prop="phone">
                    <el-input v-model="formData.phone" autocomplete="off" />
                  </el-form-item>
                  
                  
                  <!-- 滑块验证 -->
                  <el-form-item label="滑块验证" prop="verifyStatus">

                  </el-form-item>
                  <!-- <slide-verify
                    :l="42"
                    :r="20"
                    :w="280"
                    :h="140"
                    :imgs="imgs"
                    @success="onSuccess"
                    @fail="onFail"
                    @refresh="onRefresh"
                    :style="{ width: '100%' }"
                    class="slide-box"
                    ref="slideBlock"
                    :slider-text="msg">
                  </slide-verify> -->
                  

                  <div class="getInfo">
                    <el-form-item label="请输入验证码" prop="code">
                    <el-input  v-model="formData.code"  />
                  </el-form-item>
                  <span class="btn" @click="getCode" v-show="!isShow">获取验证码</span>
                  <span class="btn" v-show="isShow">{{ count }}</span>

                  </div>

                  <el-form-item class="footerbtn"  >
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                      >登录</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 微信扫码登录 -->
              <div class="wxLogin" v-show="!showPhoneLogin">
                  微信扫码登录1
              </div>
            </div>
            <div class="footer"></div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, Ref, ref} from "vue"
import { ElMessage, FormInstance, MessageHandler } from 'element-plus'
import { useRouter ,useRoute} from 'vue-router'
import { checkPhone } from '@/utils/loginUtils'
import {SendSMSAPI,PhoneLoginAPI} from '@/request/api'

// 获取项目的路由对象                
const router = useRouter();
// 定义是否使用手机号码登录
let showPhoneLogin:Ref<boolean> = ref(true);
  
// 跨快的验证成功信息


  let formData:FormDataType = reactive({
            phone: '18212320910',
            code: '2123',
            verifyStatus:false,
          })
  
  // 处理点击选项登录
const handleLogin = (val:boolean)=>{
    showPhoneLogin.value = val
}

// 获取ref定义值为ruleForm的dom元素
const ruleFormRef = ref<FormInstance>()
  const open2 = () => {
  ElMessage({
    message: '登录成功',
    type: 'success',
  })
}
// 定义表单提交按钮的方法
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      console.log('submit!')
     let res = await PhoneLoginAPI({
        phone:Number(formData.phone),                                                       
        verifyCode:formData.code
      })
      if(res.code==0){
        // 将token存储到localstorage里面
        localStorage.setItem('authorization-token',res['x-auth-token'])
        // 提示登录成功
        open2()
        // 页面跳转到首页
        router.push('/home')
      }
      
    } else {
      console.log('还有数据未校验成功')
      return false
    }
  })
}

const open3 = () => {
  ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
 const validatorPhone = (rule: unknown,value: string,callback:(n?:string | boolean |  MessageHandler)=>void) => {
    if (value === '') {
      console.log(value);
      callback('要输入手机号码')
    } else {
      if(checkPhone(value)){
        callback() 
      }else{
      //  open3()
        callback( '号码格式错误，请正确输入！！！')
        
      }
     
    }
  }
// 定义校验规则
let rules = reactive({
          phone: [
            { required:true,trigger: 'blur',message:'请输入手机号码！！！' },
            { validator:validatorPhone,trigger:'blur' }
          ],
          password: [
            { required:true,trigger: 'blur',message:'请输入验证码！！！'}
          ],
        })

// 定义滑块验证的图片  
let imgs = reactive([
        // 图片验证的本地图片地址
        "/img/verify/1.webp",
        "/img/verify/2.webp",
        "/img/verify/3.webp",
      ])
// 定义提示信息
let msg = ref('向右滑动')

// 滑块验证的相关方法
 const  onSuccess = ()=>{
  console.log("验证成功");
      msg.value = "验证成功";
      formData.verifyStatus = true;
 }
 const  onFail = ()=>{
    console.log("验证失败");
      msg.value = "验证失败，请重新验证";
      formData.verifyStatus = false;
 }
 const  onRefresh = ()=>{
      console.log("验证刷新");
      msg.value = "验证已刷新";
      formData.verifyStatus = false;
    
 }
//  定义获取验证码的倒计时
let isShow = ref(false)
// 定义倒计时
let count = ref(30);

const countDown = ()=>{
  let timer: NodeJS.Timer;
  timer = setInterval(()=>{
    count.value--;
    if(count.value ==0){
      clearInterval(timer)
      isShow.value =false;
      count.value=60;
    }
  },1000)
}
const getCode = ()=>{
  // 这里编写异步获取验证码的代码
  // 检查手机号码有没有错误，有错误就不进行发送短信验证码
    if(!checkPhone(formData.phone)) {
        alert("手机号码格式错误，请正确输入")
        return
    }
    // 手机号格式正确以后我们才进行发短信
    SendSMSAPI({
      phone:Number(formData.phone.trim())
    }).then(res=>{
        console.log(res);
    })
    
  
  // 当上面那一步获取验证码接口成功以后才将计时器执行。
  countDown();
  isShow.value = true;
}

</script>
 
<style lang = "less" scoped>
    .login_box{
      position: relative;
      .mask{
          width: 100%;
          height: 100%;
          position: fixed;
          left: 0;
          top: 0;
          background-color: rgba(0,0,0,.2);
      }
       .container{
        height: 350px;
        width: 450px;
        background-color: rgb(238, 227, 227);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,32%);
        border-radius: 20px;
        .top{
            margin:  0 auto;
            width:70%;
            display: flex;
            // justify-content: center;
            align-items: center;
            .left_box{
              flex:1;
              padding: 10px 5px 10px 0;
              cursor: pointer;
              font-size: 18px;
              font-weight: 700;
              font-family:'楷体';
              // &:hover{
              //   background-color: rgb(255, 255, 255);
              // }
              &.active{
                color:#fff
              }
            }
            .line{
              cursor: pointer;
              height: 20px;
              border-right: 1px solid black;
            }
            .right_box{
              &.active{
                color:#fff
              }
              font-family:'楷体';
              cursor: pointer;
             flex:1;
             font-size: 18px;
             font-weight: 700;
             padding: 10px 0 10px 5px; 
            }
          }
          
          .content{
              height: 220px;
              width: 280px;
              background-color: rgb(238, 227, 227);

              margin: 0 auto;
              .slider{
                height: 140px;
                width: 100%;
                background-color: #fff;
              }
            .getInfo{
              display: flex;
             
              .btn{
                height:38px;
                width: 90px;
                font-size: 13px;
                background-color: blue;
                color: #fff;
                padding-left: 5px;
                margin-left: 10px;
                border: none;
                margin-top: 2px;
                line-height: 38px;
                cursor: pointer;
              }
            }
            .footerbtn{
              position: absolute;
              bottom:  30px !important;
             
            
            }
          }
          .footer{
            z-index: -1;
              width: 500px;
              height: 35px;
              background-color: #fff;
              position: absolute;
              left: -26px;
              border-top-left-radius: 20px;
              border-top-right-radius: 20px;
              // box-shadow: h-shadow v-shadow blur spread color inset;
              box-shadow: 0 -4px 2px 0px rgb(253, 249, 249);
              bottom: 0;
            }
      }
      ::v-deep .el-input__wrapper .el-input__inner{
        height:40px !important ;
        margin:0 !important;
        padding: 0 !important;
  }

  ::v-deep .el-form-item{
    margin-bottom: 10px !important; 
    
  }
  ::v-deep .el-form{
    height: 220px !important;
  }

  ::v-deep .el-form-item__content .el-button{
    width: 280PX !important;
    height: 40px !important;
  }
} 
/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
} 
</style>